<template>
  <a-layout class="main-box">
    <a-layout-sider width="200">
      <a-menu class="menu"
              v-model:selectedKeys="currentItem"
              mode="inline"
              @click="navigate">
        <a-menu-item v-for="menu in menus" :key="menu.key">
          <Icon :icon="menu.icon" />
          {{menu.text}}
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout-content class="layout-main">
      <slot />
    </a-layout-content>
  </a-layout>
</template>

<script setup>
import {Icon} from "../Icon/Icon";
import {useRoute, useRouter} from "vue-router";
import {ref} from "vue";

const route = useRoute()

const props = defineProps({
  menus: {
    type: Array,
    required: true,
    default: []
  }
})

const currentItem = ref([route.name])

const router = useRouter()

const navigate = to => {
  const toRoute = router.getRoutes().find(route => to.key === route.name)
  if (!toRoute) return
  router.push(toRoute.path)
}
</script>

<style scoped>
.main-box {
  padding: 20px 40px;
  min-height: calc(100vh - 64px - 80px)
}

.layout-main {
  width: 100%;
  background-color: #fff;
  padding: 20px 40px;
}

.menu {
  height: 100%;
}
</style>